<template>
    <div ref="fBox" class="floating-box">
        <div ref="container" class="container">
            <slot></slot>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';

const props = defineProps({
    maxHeight: {
        type: Number,
        default: window.innerHeight * 0.99
    }
});

const fBox = ref();
const container = ref();

defineExpose({
    full() {
        fBox.value.style.background = `rgba(255, 255, 255, 0.56)`;
        fBoxContainer.style.transform = `translateY(calc(100% - ${maxHeight}px))`;
        fBoxContainer.style.transition = `transform 0.3s ease`;
        translateY = props.maxHeight;
    }
})

const maxHeight = props.maxHeight;
const minHeight = Math.max(140, Math.ceil(maxHeight * 0.17));
let translateY = minHeight;
let curTranslateY = translateY;
let startY = 0;

let fBoxContainer:any = null;

const touchStart = (ev:TouchEvent) => {
    startY = ev.changedTouches[0].clientY;
    fBoxContainer.style.transition = 'none 0s ease 0s';
    fBoxContainer.addEventListener('touchmove', touchMove);
    fBoxContainer.addEventListener('touchend', touchEnd);
}

const touchMove = (ev: TouchEvent) => {
    const mY = ev.changedTouches[0].clientY;
    curTranslateY =  translateY - (mY - startY);
    if(curTranslateY > maxHeight + 50) {
        fBoxContainer.style.transition = `transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s`;
        curTranslateY = maxHeight;
    } else if(curTranslateY < minHeight - 50) {
        fBoxContainer.style.transition = `transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s`;
        curTranslateY = minHeight;
    }
    // (maxHeight - curTranslateY)
    fBox.value.style.background = `rgba(255, 255, 255, ${(curTranslateY - minHeight) / (maxHeight - minHeight) * 0.56})`;
    fBoxContainer.style.transform = `translateY(calc(100% - ${curTranslateY}px))`;
}
const touchEnd = () => {
    translateY = curTranslateY;
    curTranslateY = 0;
    fBoxContainer.style.transition = `transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s`;
    if(translateY > maxHeight * 0.5) {
        fBoxContainer.style.transform = `translateY(calc(100% - ${maxHeight}px))`;
        fBox.value.style.background = `rgba(255, 255, 255, 0.56)`;
        translateY = maxHeight;
    } else {
        fBoxContainer.style.transform = `translateY(calc(100% - ${minHeight}px))`;
        fBox.value.style.background = `rgba(255, 255, 255, 0)`;
        translateY = minHeight;
    }

    fBoxContainer.removeEventListener('touchmove', touchMove);
    fBoxContainer.removeEventListener('toucend', touchEnd);
}

onMounted(() => {
    fBoxContainer = container.value;
    fBoxContainer.style.height = maxHeight + 'px';
    fBoxContainer.style.transform = `translateY(calc(100% - ${minHeight}px))`;
    fBoxContainer.addEventListener('touchstart', touchStart);
});
</script>
<style scoped lang="scss">
.floating-box {
    pointer-events: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.0);
    z-index: 1;
    .container {
        overflow: hidden;
        position: absolute;
        pointer-events: auto;
        bottom: 0px;
        right: 0px;
        background: #fff;
        box-shadow: 0 -1px 1px #f1f1f1;
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        width: 100%;
    }
}
</style>